/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div style="height: 100%; padding: 24px">
        <div v-if="routeName === 'task_post'" class="task-post">
            <el-card class="task-post__card task-card__data" @click.native="createTask">
                <i class="iconfont iconyunMySQL"></i>
                <lang>数据工程</lang>
            </el-card>
            <el-card class="task-post__card task-card--disabled">
                <i class="iconfont icon1-2-1-fenbushi"></i>
                <lang>分布式训练</lang>
            </el-card>
        </div>
        <router-view v-else></router-view>
    </div>
</template>

<script>
export default {
    name: "TaskPost",
    computed: {
        routeName() {
            return this.$route.name
        }
    },
    methods: {
        createTask() {
            this.$router.push({name:'data_project'})
            // if(!this.$store.state.task.form.jobName) {
            //     this.$router.push({name:'data_project'})
            // }
            // this.$confirm({
            //     title: _('提示'),
            //     subTitle: _('是否继续上次数据进行编辑？'),
            //     msg:'',
            //     icon: 'warning',
            //     autoClose: true,
            //     callback: actionName => {
            //         if (actionName === 'submit') {
            //             this.$router.push({name:'data_project'})
            //         }
            //     }
            // });
        }
    }
}
</script>

<style scoped lang="less">
.task-post {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    .task-card__data:hover {
        cursor: pointer;
        /deep/ .el-card__body {
            color: #165DFF;
            span {
                color: #165DFF;
            }
        }
    }
    .task-post__card {
        width: 320px;
        height: 400px;
        border-radius: 8px;
        background: #FFFFFF;
        /deep/ .el-card__body {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            &>.iconfont {
                font-size: 72px;
                margin-top: 50%;
            }
            &>span {
                margin-top: 35%;
                font-size: 24px;
                color: #3D3D3D;
            }
        }
    }

    .task-card--disabled {
        /deep/ .el-card__body {
            color: #D1D1D1;
            span {
                color: #D1D1D1;
            }
        }
    }

    .task-post__card+.task-post__card {
        margin-left: 173px;
    }
}
</style>
